<template>
    <div >
        <el-container v-loading="loading_bu">
            <el-header>权限管理</el-header>
            <el-main>
                <div  class="mainDiv">
                    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                        <el-tab-pane label="部门管理" name="first">
                            <el-row>
                                <el-col :span="9">
                                    <div class="grid-content bg-purple">
                                    <div class="deptLeft">
                                        <el-card class="box-card">
                                        <div slot="header" class="clearfix">
                                            <span>部门管理</span>
                                        </div>
                                                <el-tree
                                                        :data="depts"
                                                        node-key="departmentId"
                                                        :props="quanXianProps"
                                                        default-expand-all
                                                        :expand-on-click-node="false"
                                                        >
                                                     <span class="custom-tree-node" slot-scope="{ node, data }">
                                                         <el-button
                                                                 type="text"
                                                                 size="mini"
                                                                 @click="() => appended(data)">
                                                           {{ node.label }}
                                                         </el-button>
                                                    <template>
                                                         <el-button
                                                                 v-if="QuanXianShow.indexOf('修改权限组')!=-1?true:false"
                                                                 type="text"
                                                                 size="mini"
                                                                 @click="() => append(data)">
                                                                    修改权限组
                                                         </el-button>
                                                    </template>
                                                     </span>
                                                </el-tree>
                                    </el-card>
                                    </div>
                                </div>
                                </el-col>
                                <el-col :span="15">
                                    <div class="grid-content bg-purple-light">
                                    <div class="deptRight">
                                        <el-card class="box-card" >
                                        <div slot="header" class="clearfix">
                                            <span>职位管理</span>
                                        </div>
                                            <el-tree
                                                    :data="postList"
                                                    node-key="positionId"
                                                    :props="zhiWeiProps"
                                                    default-expand-all
                                                    :expand-on-click-node="false"
                                                    v-loading="loading_zhi"
                                            >
                                                    <span  class="custom-tree-node" slot-scope="{node,data}">
                                                            <span>{{node.label }}</span>
                                                            <span>
                                                              <el-button
                                                                      v-if="QuanXianShow.indexOf('修改职位权限组')!=-1?true:false"
                                                                      type="text"
                                                                      size="mini"
                                                                      @click="() => edit(data)">
                                                                修改职位权限组
                                                              </el-button>
                                                            </span>
                                                     </span>
                                            </el-tree>
                                    </el-card>
                                    </div>
                                </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="用户管理" name="second">
                            <div>
                                <div>
                                        <el-row>
                                            <el-col :span="12">
                                                <div  v-if="QuanXianShow.indexOf('新增用户')!= -1 ?true:false">
                                                    <el-button  @click="addUser()" class="addUser" type="primary" plain >新增用户</el-button>
                                                </div>
                                                <div v-if="QuanXianShow.indexOf('新增用户')!= -1 ?false:true">
                                                    <div class="addUserNo"></div>
                                                </div>
                                                </el-col>
                                            <el-col :span="12">
                                                <el-input placeholder="请输入内容"v-model="searchParam" class="input-with-select" @change="searchEmp">
                                                    <el-button slot="append" icon="el-icon-search"></el-button>
                                            </el-input></el-col>
                                        </el-row>
                                </div>
                                <!--如果有搜索值  显示这里-->
                                <div  v-if="ifShow" v-loading="loading_SeaTable">
                                            <!--员工名单-->
                                            <el-table :data="searchList" style="width: 100%" >
                                                <el-table-column prop="empId"
                                                                 label="编号"
                                                                 >
                                                </el-table-column>
                                                <el-table-column prop="empName" label="姓名"></el-table-column>

                                                <el-table-column prop="empSex" label="性别">
                                                    <template slot-scope="sex">
                                                        {{sex.row.empSex == 0?"男":"女"}}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="empTel" label="电话"></el-table-column>
                                                <el-table-column	prop="empSalary" label="薪资">
                                                </el-table-column>
                                                <el-table-column prop="isOnJob" label="在职状态">
                                                    <template slot-scope="job">
                                                        {{job.row.isOnJob == 0?"正式员工":"试用期员工"}}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column	prop="hireDate" label="入职日期">
                                                    <template slot-scope="h">
                                                        {{h.row.hireDate | formatDate}}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="pos.positionName" label="部门职位">
                                                </el-table-column>
                                                <el-table-column	 prop=""  label="操作" v-if="QuanXianShow.indexOf('用户')!= -1 ?true:false">
                                                    <template slot-scope="e">
                                                        <el-button type="primary" icon="el-icon-edit" circle
                                                                   v-if="QuanXianShow.indexOf('修改用户')!= -1 ?true:false"
                                                                   @click="editEmp(e.row)"></el-button>
                                                        <el-button  circle  icon="el-icon-delete" type="danger"
                                                                    v-if="QuanXianShow.indexOf('删除用户')!= -1 ?true:false"
                                                                    @click="deleteEmp(e.row)"></el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <!-- 分页标签-->
                                            <el-pagination
                                                    background
                                                    layout="prev, pager, next,jumper"
                                                    :total="totalSizeSearch" :current-page.sync="currPageSearch"
                                                    :page-size="pageSizeSearch" @current-change="changePageSearch">
                                            </el-pagination>
                                </div>
                                <!--如果没有搜索值   显示折叠面板-->
                                <div v-if="!ifShow" v-loading="loading_table">

                                    <el-collapse v-model="activeNames"  @change="handleChange"  accordion el-size="font-size">

                                        <div v-for="de in deptLists" >

                                        <el-collapse-item :title="de.departmentName" :name="de.departmentId" >
                                            <!--员工名单-->

                                            <el-table :data="empLists" style="width: 100%" >
                                                <el-table-column prop="empId"
                                                                 label="编号">
                                                </el-table-column>
                                                <el-table-column prop="empName" label="姓名"></el-table-column>

                                                <el-table-column prop="empSex" label="性别">
                                                    <template slot-scope="sex">
                                                        {{sex.row.empSex == 0?"男":"女"}}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column prop="empTel" label="电话"></el-table-column>
                                                <el-table-column	prop="empSalary" label="薪资">
                                                </el-table-column>

                                                <el-table-column prop="isOnJob" label="在职状态">
                                                    <template slot-scope="job">
                                                        {{job.row.isOnJob == 0?"正式员工":"试用期员工"}}
                                                    </template>
                                                </el-table-column>

                                                <el-table-column	prop="hireDate" label="入职日期">
                                                    <template slot-scope="h">
                                                        {{h.row.hireDate | formatDate}}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="pos.positionName" label="部门职位">
                                                </el-table-column>

                                                <el-table-column	 prop=""  label="操作" v-if="QuanXianShow.indexOf('用户')!= -1 ?true:false">
                                                    <template slot-scope="e">
                                                        <el-button type="primary" icon="el-icon-edit" circle
                                                                   v-if="QuanXianShow.indexOf('修改用户')!= -1 ?true:false"
                                                                   @click="editEmp(e.row)"></el-button>
                                                        <el-button  circle  icon="el-icon-delete" type="danger"
                                                                    v-if="QuanXianShow.indexOf('删除用户')!= -1 ?true:false"
                                                                    @click="deleteEmp(e.row)"></el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <!-- 分页标签-->
                                            <div v-if="deIf">
                                            <el-pagination
                                                    background
                                                    layout="prev, pager, next,jumper"
                                                    :total="totalSize" :current-page.sync="currPage"
                                                    :page-size="pageSize" @current-change="changePages">
                                            </el-pagination>
                                            </div>
                                            </el-collapse-item>
                                        </div>
                                    </el-collapse>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-main>
        </el-container>
        <!--权限组的穿梭框-->
        <el-dialog
                title="修改权限组"
                :visible.sync="dialogVisible"
                :before-close="handleClose"


        >
                <el-transfer class=" " v-model="quanXianValue" :data="quanXian" :titles="titles"
                             :props="{key: 'functionTypeId',label: 'funTypeName'}" v-loading="loading_edFunTy">
                </el-transfer>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="savePrivilege">确 定</el-button>
            </div>
        </el-dialog>
        <!--新增员工的表格-->
        <div>
            <!--新增表单-->
            <el-dialog	title="新增员工" :visible.sync="addFormVisible" width="40%">
                <div v-loading="loading_addUser">
                    <el-form :model="emp" :rules="rules"  ref="emp"  label-width="80px">
                        <el-form-item label="员工姓名" prop="empName" >
                            <el-input width="200px" v-model="emp.empName"  @change="checkEmpName"></el-input>
                            <div v-if="checkName" style="height:20px;margin: 0px;font-size:12px;padding-left: 20px;color: red">该用户名已被注册!</div>
                        </el-form-item>
                        <el-form-item label="员工性别" prop="empSex" style="width:55%">
                            <el-select v-model="emp.empSex" placeholder="请选择" >
                                <el-option
                                        v-for="it in sexChoice"
                                        :key="it.id"
                                        :label="it.sex"
                                        :value="it.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="员工电话" prop="empTel">
                            <el-input width="200px" oninput="value=value.replace( /\D|^0/g,'')" v-model="emp.empTel"></el-input>
                        </el-form-item><!--oninput="value=value.replace(/[^\d]/g,'')"-->
                        <el-form-item label="员工薪资" prop="empSalary">
                            <el-input width="200px" oninput="value=value.replace( /\D|^0/g,'')" v-model="emp.empSalary"></el-input>
                        </el-form-item>
                        <el-form-item label="所属部门"  prop="dept.departmentId" style="width:55%">
                            <el-select v-model="emp.dept"  value-key="departmentId" placeholder="请选择" @change="deptChange">
                                <el-option
                                        v-for="item in deptLists"
                                        :key="item.departmentId"
                                        :label="item.departmentName"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="职位"   prop="pos.positionId" style="width:55%">
                            <el-select v-model="emp.pos" value-key="positionId" placeholder="请选择">
                                <el-option v-for="its in postLists"
                                           :key="its.positionId"
                                           :label="its.positionName"
                                           :value="its">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="员工状态" prop="isOnJob" style="width:55%">
                            <el-select v-model="emp.isOnJob" placeholder="请选择">
                                <el-option
                                        v-for="i in isOnJobChoice"
                                        :key="i.id"
                                        :label="i.isOnJob"
                                        :value="i.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="入职日期" prop="hireDate" >
                            <el-date-picker v-model="emp.hireDate" type="date" placeholder="选择日期" />
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="cancelAdd()">取 消</el-button>
                            <el-button type="primary" @click="addUserSure('emp')">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>
        </div>
        <!--新增员工表单结束-->

        <!--修改职位权限的穿梭框-->
        <el-dialog
                title="修改职位权限"
                :visible.sync="zhiWeiVisible"
                :before-close="handleClose"

        >
   <el-tabs :tab-position="tabPosition" style="height: 100%;"   @tab-click="quanChange" v-loading="loading_edFun">

        <el-tab-pane   v-for="(item, index) in quanHave" :name="item.funTypeId" :key="item.funTypeId" :label="item.funTypeName"

                        ><!--:name="item.activeName"-->
            <span slot="label"><i class="iconfont "> {{item.funTypeName}} </i></span>

            <template>
                 <el-transfer v-model="zhiWeiValue" :data="zhiWei" :titles="zhiWeiTitles"
                              :props="{key: 'functionId',label: 'functionName'}" v-loading="loading_edFunRi">
                 </el-transfer>
          </template>
       </el-tab-pane>
    </el-tabs>

            <div slot="footer" class="dialog-footer">
                <el-button @click="QuanCancel">取 消</el-button>
                <el-button type="primary" @click="addQuanSure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    import {formatTimeToStr} from '@/assets/format.js'

    export default {
        name: "jurisdiction",
        data() {
                return {

                    empPost:{
                        empId:0,
                        empName:'',
                        empSex:0,
                        empTel:'',
                        empSalary:0,
                        hireDate:'',
                        isOnJob:0,
                        dept:{
                            departmentId:0},
                        pos:{
                            positionId:0
                        }
                    },
                    sexChoice:[
                        {id:0, sex:"男"},
                        {id:1, sex:"女"}],
                    isOnJobChoice:[
                        {id:0, isOnJob:"正式期"},
                        {id:1, isOnJob:"试用期"}],
                    emp:{
                        empId:0,
                        empName:'',
                        empSex:0,
                        empTel:'',
                        empSalary:0,
                        hireDate:'',
                        isOnJob:0,
                        dept:{
                            departmentId:0,
                            departmentName:'',
                        },
                        pos:{
                            positionId:0,
                            positionName:'',
                        }
                    },
                    funTy:{
                        functionTypeId:0,
                        funTypeName:''
                    },
                    /*表单验证*/
                    rules:{
                        // 要以数组形式展示
                        empName:[{ required: true, message: "用户名不能为空!", trigger: "change" },
                            { min: 2, max: 30, message: "长度在 2 到 30 个字符!", trigger: "blur" }],
                        empSalary:[{ required: true, message: "薪水不能为空!", trigger: "change" }],
                        empSex:[{required: true, message: "性别不能为空!", trigger: "change"}],
                        isOnJob:[{required: true, message: "在职不能为空!", trigger: "change"}],
                        empTel:[{required: true,message: "电话号码不能为空!", trigger: "change"},
                            {min:11,max:11,message: "电话号码格式错误!",trigger: "blur"}],
                        hireDate:[{required: true,message:"入职日期不能为空!",trigger: "change"}],
                        "dept.departmentId":[
                            {required: true,message:" 部门不能为空!",trigger: "change，blur"}],
                        "pos.positionId":[
                            {required: true,message:" 职位不能为空!",trigger: "change，blur"}],
                    },
                    ifShow:false,
                    searchParam:'',//搜索的员工名字
                    searchList:[],//搜索后的emplist
                    pageSizeSearch:3,//分页页大小
                    currPageSearch:1,//当前页码，默认为1
                    totalSizeSearch:0,//总记录数
                    /*新增时的部门选择*/
                    deptLists:[],//部门
                    postLists: [],//职位
                    /*折叠面板*/
                    deIf:true,
                    pageSize:3,//分页页大小
                    currPage:1,//当前页码，默认为1
                    totalSize:0,//总记录数
                    deId:0,
                    activeNames: '1',
                    empLists:[],//员工
                    /*新增员工*/
                    valid:false,
                    value1:'',
                    addFormVisible: false,
                    Nei:'',/*搜索值*/
                    /*新增员工结束*/

                    /*树型控件数据源*/
                    depts:{
                        departmentId:0,
                        departmentName:''
                    },
                    deptList:[],
                    /*权限的树型结构*/
                    quanXianProps: {
                        id:'departmentId',
                        children: 'deptList',
                        label: 'departmentName'
                    },
                    /*树型控件数据源结束*/
                    /*left标签页*/
                    tabPosition: 'left',
                    /*职位权限数据源*/
                    activeName: 'first',
                    /*权限穿梭框*/
                    dialogVisible: false,
                    titles:['未有权限组','已有权限组'],
                    quanXian: [],
                    quanXianValue: [],
                    //保存授权
                    deptId:[],
                    funTypeId:[],
                    /*权限穿梭框结束*/
                    postList:[],
                    /*职位的树型结构*/
                    zhiWeiProps: {
                        id:'positionId',
                        label: 'positionName'
                    },
                    /*职位穿梭框*/
                    zhiWeiVisible: false,
                    zhiWeiTitles:['未有权限','已有权限'],
                    zhiWei:[],
                    zhiWeiValue:[],
                    jurt:false,
                    quanHave:[],
                    funTyName:'',
                    positionId:0,
                    /*职位穿梭框结束*/
                    QuanXianShow:[],
                    jur:true,/*新增过来的，还是修改过来的*/
                    /*懒加载*/
                    loading_bu:true,
                    loading_zhi:false,
                    loading_edFunTy:true,
                    loading_edFun:true,
                    loading_edFunRi:false,
                    loading_SeaTable:true,
                    loading_table:false,
                    loading_addUser:false,
                    checkName:false,
                    /*把回传的名字存起来*/
                    eName:'',
                };
            },
        created:function () {
            this.initData();/*树型结构获取部门对象*/
            this.initDataAllDept();/* 获取正常部门对象，用于新增用户时选择 折叠面板 */
            this.handleChange();
           this.initJur();
        },
            /* 时间格式化*/
            filters: {
                        formatDate: function(time) {
                            if(time!=null&&time!="")
                            {
                                var date = new Date(time);
                                return formatTimeToStr(date, "yyyy-MM-dd ");
                            }else{
                                return "";
                            }
                        }
                        },
        methods: {
                initJur(){
                    this.$axios.post("api/check-FunTy",this.qs.stringify(this.$store.state.user))
                        .then(v=>{
                            this.QuanXianShow=v.data;
                            console.log("根据前台传过来的empId 查询是否有功能显示"+v.data);
                            console.log("根据前台传过来的empId 查询是否有功能显示"+  this.QuanXianShow)
                        });
                },
            changePage(currPage){
                this.initData(currPage,this.pageSize);
            },

            /*树型结构获取部门对象*/
            initData(){
                this.axios.get("api/dept-list")
                    .then(v=>{
                        this.depts=v.data;
                    })
                    .catch(function () {
                    })
            },

            /*打开职位穿梭框*/
            open(){
              this.zhiWeiVisible=true
            },


            /*穿梭框开始*/
            /*穿梭框的确认框*/
            sure(){
                this.dialogVisible = false;
            },
            handleClose(done) {
                this.$confirm('确认不保存并关闭？')
                    .then(_ => {
                        done();
                        this.jurt==false;
                    })
                    .catch(_ => {});
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            /*穿梭框结束*/

            /*树型控件的事件*/
          /* 根据点击id取得部门对应权限组*/
            posById(y){
                this.loading_zhi=true;
                this.loading_edFunTy=true;
               this.deptId=y;
                this.zhiWeiValue=[];
                    this.zhiWei=[];
                    this.quanHave=[];
                this.axios.get("api/funType-list",{params:{departmentId:this.deptId}})
                    .then(v=>{
                        this.quanXian = v.data.funTypeList;//所有的功能权限组
                        console.log(this.quanXian);
                        this.quanXianValue = v.data.deptFunType;//角色已有的功能权限组id
                        this.loading_edFunTy=false;
                        console.log(this.quanXianValue);

                });
                /*根据点击的部门id取得对应的职位*/
                this.axios.post("api/post-list",this.qs.stringify({departmentId:this.deptId}))
                    .then(value => {
                        this.postList=value.data;
                        this.loading_zhi=false;
                        console.log(this.postList)//部门对应的职位
                })
            },


            /*点击的 权限组名 对应所有权限*/
            funNotHave(){

                this.axios.post("api/fun-byId",this.qs.stringify({funTypeName:this.funTyName}))
                    .then(v=>{
                        this.zhiWei=v.data;
                        console.log(this.zhiWei+"this.zhiWei");
                        this.loading_edFunRi=false;
                    })
            },
            /*点击的 权限组 对应已有权限*!/*/
            funHave(){
                this.axios.post("api/fun-byPostId", this.qs.stringify({funTypeName:this.funTyName,positionId:this.positionId}))
                    .then(v=>{
                        this.zhiWeiValue=v.data;
                        console.log(this.zhiWeiValue+"this.zhiWeiValue")
                    })
            },
            /*保存权限组*/
            savePrivilege(){
                this.loading_edFunTy=true;
                console.log(this.deptId+"this.deptId");
                console.log(this.quanXianValue+"this.quanXianValue");
                this.$axios.post("api/save-privilege",
                    this.qs.stringify({str:JSON.stringify({departmentId:this.deptId,funTypeId:this.quanXianValue})}))
                    .then(v=>{
                        this.global.mes_success("保存权限组成功");
                        this.loading_edFunTy=false;
                        this.dialogVisible = false;
                    }).catch()
            },
            append(data){
                this.dialogVisible=true;
                this.posById(data.departmentId);

            },
            appended(data){
                this.posById(data.departmentId);

            },
            edit(data){
                this.loading_edFun=true;
                this.zhiWeiValue=[];
                    this.zhiWei=[];
                    this.quanHave=[];
                this.zhiWeiVisible=true;
                /*点击的职位id*/
                console.log(data.positionId+"点击的职位id");
                this.positionId=data.positionId;
                /*该职位对应的部门的权限组*/
                console.log(this.quanXianValue+"该职位对应部门的权限组");   //角色已有的功能组权限id
                /*查出对应功能组权限id的集合  功能集合*/
                this.$axios.post("api/ftname-list",
                    this.qs.stringify({str:JSON.stringify({funTypeId:this.quanXianValue})}))
                    .then(v=>{
                        this.quanHave=v.data;
this.loading_edFun=false;
                        console.log(v.data+"2566");
               })
            },
            /*标签页 点击权限组  获得权限组name  获取对应权限*/
            quanChange(tab,event){
        this.loading_edFunRi=true;
            this.funTyName=tab.label;
                this.funHave();
                this.funNotHave();
                this.jurt=true;
            },
            /*取消保存权限*/
            QuanCancel(){
                this.zhiWeiVisible=false;
                this.jurt=false
            },
            /*保存权限 一次只能保存一个*/
            addQuanSure(){
                if(this.jurt==true){
                    this.loading_edFun=true;
                    console.log("职位id"+this.positionId);
                    this.axios.post("api/save-quan",
                        this.qs.stringify({str:JSON.stringify({positionId:this.positionId,funTypeName:this.funTyName,funId:this.zhiWeiValue})}))
                        .then(v=>{
                            this.global.mes_success("保存职位权限成功");
                            this.loading_edFun=false;
                            this.jurt=false; this.initData();
                            this.zhiWeiVisible=false;
                        })
                        .catch()
                }
else {
                    this.global.mes_warning("请先点击左边权限名");
                }
            },

            /*折叠面板点击事件 获得部门id 传到后台 分页  完成*/
            changePages(currPage){
                this.handleChange(this.deId,currPage)
            },
            handleChange(val,currPage){
                this.loading_table=true;
                this.axios.post("api/emp-list",this.qs.stringify({departmentId:val,page:this.currPage,size:this.pageSize}))
                    .then(v=> {
                        this.empLists = v.data.rows;
                        console.log("员工信息"+this.empLists);
                        if(this.empLists==''){
                            this.deIf=false;
                        }else {
                            this.deIf=true;
                        }
                        this.totalSize = v.data.total;
                        this.loading_table=false;
                        this.deId=val;
                    })
            },
            /*折叠面板点击事件结束*/
            /* 获取正常部门对象，用于新增用户时选择 and折叠面板 */
            initDataAllDept(){
                this.loading_bu=true;
                this.axios.get("api/dept-alllist")
                    .then(v=>{
                        this.deptLists=v.data;
                        this.loading_bu=false;
                        console.log(this.deptLists+"部门")
                    })
                    .catch(function () {
                    })
            },
            /*根据输入内容进行查询*/
            searchEmp(currPageSearch){

                this.loading_SeaTable=true;
                this.loading_table=true;
                console.log(this.searchParam);
                if(this.searchParam==null||this.searchParam==''){
                    this.ifShow=false;
                    this.loading_table=false;
                }else {
                    this.Nei=currPageSearch;
                    this.ifShow=true;
                    this.axios.post("api/emp-like",this.qs.stringify({search:this.searchParam,page:this.currPageSearch,size:this.pageSizeSearch}))
                        .then(v=>{
                            this.searchList=v.data.rows;
                            this.totalSizeSearch = v.data.total;
                            this.loading_SeaTable=false;

                            console.log(this.searchList);
                        })
                }
            },
            changePageSearch(currPageSearch){
                this.searchEmp(currPageSearch);
            },
            /*修改员工信息*/

            /*取消添加员工或修改*/
            cancelAdd(){
                this.clearFrom();
                this.addFormVisible=false;
                this.checkName=false;
            },
            /*删除员工*/
            deleteEmp(s){
                this.loading_bu=true;
                console.log(s.empId+"删除部门员工的id");
                this.axios.post("api/delete-emp",this.qs.stringify({empId:s.empId}))
                    .then(v=>{
                        this.global.mes_success("删除成功");
                        this.handleChange(this.deId,this.currPage);
                        this.loading_bu=false;
                    })
            },
            editEmp(s){
                this.loading_addUser=true;
                this.jur=false;
                this.checkName=false;
                console.log(s);
                this.addFormVisible=true;
                this.emp.empId=s.empId;
                this.emp.empName=s.empName;
                this.eName=this.emp.empName;/*把名字存起来，查重复用*/
                this.emp.empSex=s.empSex;
                this.emp.empSalary=s.empSalary;
                this.emp.hireDate=s.hireDate;
                this.emp.isOnJob=s.isOnJob;

                this.emp.empTel=s.empTel;
                this.emp.dept=s.dept;
                this.deptChange(this.emp.dept);
                this.emp.pos=s.pos;
                console.log(s.pos.positionName+"员工职位");
                console.log(this.emp.isOnJob+"员工再职位");
            },
            /*新增员工开始*/
            addUser(emp){
                this.addFormVisible=true;
                this.jur=true;
                this.eName='';
            },
            /*检查名字是否被注册*/
            checkEmpName(itemName){
                console.log(itemName+"it");
                console.log(this.eName+"this.eName");

                if(itemName==this.eName){
                    this.checkName=false;
                }
                else {
                    this.axios.post("api/check-empName",this.qs.stringify({empName:itemName})).then(value => {

                            if(value.data==''||value.data==null){
                                this.checkName=false;
                            }
                            else {
                                console.log("this.checkName"+this.checkName);
                                this.checkName=true;
                            }

                    })
                }

                console.log( this.checkName+"255")
            },
            /*表单验证完后 关闭新增员工表*/
            addUserSure(emp){
                this.eName='';
                console.log(  "部门编号"+this.emp.dept.departmentId);
                console.log(  "部门名称"+this.emp.dept.departmentName);
                console.log( "职位编号"+this.emp.pos.positionId);

                /*!*新增表单的验证*!*/
                this.$refs[emp].validate(valid => {
                    if(valid){
                        this.empPost.empId=this.emp.empId;
                        this.empPost.empName=this.emp.empName;
                        this.empPost.empSex=this.emp.empSex;
                        this.empPost.empSalary=this.emp.empSalary;
                        this.empPost.hireDate=this.emp.hireDate;
                        this.empPost.empTel=this.emp.empTel;
                        this.empPost.dept=this.emp.dept;
                        this.empPost.pos=this.emp.pos;
                        this.empPost.isOnJob=this.emp.isOnJob;
                        console.log("员工id"+this.empPost.empId);
                        console.log("员工性别"+this.empPost.empSex);
                        console.log("员工薪水"+this.empPost.empSalary);
                        console.log("员工在职"+this.empPost.isOnJob);
                        console.log("员工入职日期"+this.empPost.hireDate);
                        console.log(  "部门编号"+this.emp.dept.departmentId);
                        console.log(  "部门名称"+this.emp.dept.departmentName);
                        console.log( "职位编号"+this.emp.pos.positionId);
                        this.loading_bu=true;
if(this.checkName==false){
    this.addFormVisible=false;
    this.axios.post("api/add-emp",this.empPost).then(value => {

        this.global.mes_success("操作成功");
        this.clearFrom();
        this.eName='';
        this.handleChange(this.deId,this.currPage);
        this.searchEmp(this.Nei);
        this.loading_bu=false;
    })
}
else {this.global.mes_success("用户名重复,新增失败！");this.checkName=false}
                    }
                    else {this.global.mes_success("操作失败");}
                })

            },
            /*新增完后清空表单*/
            clearFrom(){
                this.emp={
                    empId:0,
                    empName:'',
                    empSex:0,
                    empTel:'',
                    hireDate:'',
                    empSalary:0,
                    isOnJob:0,
                    dept:{
                        departmentId:0,
                        departmentName:'',
                    },
                    pos:{
                        positionId:0,
                        positionName:'',
                    }
                };
                    this.postLists=[];
                this.emp.pos=[]
            },
            /*新增员工时 部门的change事件 用来获取对应部门的对应职位*/
            deptChange(val){
                /*val就是选中的dept*/
                console.log("点击的部门id"+val.departmentId);

                this.axios.post("api/post-list",this.qs.stringify({departmentId:val.departmentId}))
                    .then(v =>{
                            this.postLists=v.data;
                            console.log(this.postLists);
                            if((this.postLists!=''||this.postLists!=null)&&(this.jur==true))
                            {this.emp.pos=this.postLists[0];
                            console.log(this.emp.pos+"ssssss");
                            console.log(this.jur);
                            console.log(this.jut)
                            };

                        this.jur=true;

                        this.loading_addUser=false;
                        }
                    )
            },

            /*新增员工结束*/
    }}
</script>
<style scoped>
    .mainDiv{
        background: white;
        margin:30px;
        border:1px solid #dcdfe6;
        box-shadow: #dcdfe6 1px 1px 1px 1px ;
        overflow: hidden;
    }
    .deptLeft{
        width: 85%;
        float: left;
        margin-left: 50px;
        border:1px solid #dcdfe6;
        overflow: hidden;
    }
    .deptRight{
        width: 85%;
        float: left;
        margin-right: 50px;
        border:1px solid #dcdfe6;
        overflow: hidden;
    }

    /*卡片样式开始*/
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .box-card {
        width: 100%;
    }
    /*卡片样式结束*/
    .el-row {
        overflow: hidden;
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
/*???*/
    .custom-tree-node{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    /*新增用户的样式*/
    .addUser{
           margin-left: 20px;
           float: left;
       }
    .addUserNo{
        margin-left: 20px;
        width: 100px;
        height: 20px;
        float: left;
    }
    .input-with-select  {
        background-color: #fff;
        float: right;
        width: 30%;
        margin-right: 50px;
    }
    .el-fontSize{
        font-size: large;
        margin-left: 15px;
    }
    /*职位权限穿梭框*/
    .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #666;
    }
</style>